﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>诊间屏</title>
    <link rel="stylesheet" href="/libs/@fortawesome/fontawesome-free/css/all.css" />
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.css" />
    <script src="/js/vue/vue.js"></script>
    <script src="/js/call/call.js?t=5D539F48-20C9-4C83-A275-E59711BC06D1"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            color: #ecf0f1;
            background: #2980b9;
            overflow: hidden;
        }

        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        .header {
            position: relative;
            height: 100px;
        }

            .header .department-name {
                position: absolute;
                display: flex;
                align-items: center;
                font-size: 30px;
                left: 20px;
                top: 0;
                height: 100%;
            }

            .header .station-name {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 45px;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

            .header .current-time {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: right;
                font-size: 35px;
                left: 0;
                top: 0;
                width: calc(100% - 20px);
                height: 100%;
            }

        .main {
            flex: 1;
            color: #2c3e50;
            background-color: #ecf0f1;
        }

        table {
            width: 100%;
            height: 100%;
            font-size: 35px;
            border-collapse: collapse;
        }

        td {
            position: relative;
            overflow: hidden;
            border: 2px solid #2980b960;
        }

        .no-patient {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
            opacity: 0.3;
        }

        .patients-title {
            height: 80px;
            padding-left: 20px;
            background-color: #2980b930;
        }

        .patient {
            position: relative;
            display: inline-block;
            margin: 10px;
            padding: 15px 20px;
            border-width: 2px;
            border-style: solid;
            border-radius: 10px;
        }

            .patient .patient-number {
                opacity: 0.6;
                font-size: 30px;
            }

            .patient .patient-flags {
                position: absolute;
                display: flex;
                right: 2px;
                top: 2px;
                z-index: 1;
            }

                .patient .patient-flags .patient-flag {
                    font-size: 14px;
                    color: #ecf0f1;
                    background-color: #2980b9;
                    border-radius: 10px;
                    padding: 0 5px;
                    margin-left: 5px;
                    display: none;
                }

                    .patient .patient-flags .patient-flag.checking {
                        display: block;
                        background-color: #2980b9;
                    }

                    .patient .patient-flags .patient-flag.emergency-patient {
                        display: block;
                        background-color: #d35400;
                    }

                    .patient .patient-flags .patient-flag.skip-patient {
                        display: block;
                        background-color: #8e44ad;
                    }

            .patient.ready-patient {
                border-color: #d3540060;
                background-color: #d3540010;
            }

            .patient.waiting-patient {
                background-color: #2980b910;
                border-color: #2980b960;
            }

        .footer {
            display: flex;
            align-items: center;
            height: 80px;
            color: white;
        }

            .footer .message {
                font-size: 40px;
                padding-left: 100%;
                white-space: nowrap;
                animation: marquee 20s linear infinite;
            }

            .footer .calling-info {
                font-size: 40px;
                padding-left: 20px;
                white-space: nowrap;
            }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="department-logo">
                <img v-if="station && station.logo" :src="stationLogo" />
            </div>
            <div class="department-name">
                <div v-if="station && !station.logo && station.departmentName">
                    {{ station.departmentName }}
                </div>
            </div>
            <div class="station-name">
                <div>{{ station.name }}</div>
            </div>
            <div class="current-time">
                <i class="far fa-clock pe-2 fs-1"></i>
                <span>{{ currentTime }}</span>
            </div>
        </div>
        <div class="main">
            <table border="0">
                <tbody>
                    <tr>
                        <td class="patients-title">
                            <div>正在检查的患者</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="patients">
                                <div class="no-patient" v-if="waitingInfo.readyPatients.length == 0">
                                    <div>暂无检查的患者</div>
                                </div>
                                <div class="ready-patient patient" v-for="patient in waitingInfo.readyPatients" :key="patient.number">
                                    <span class="patient-name">{{ getPatientName(patient.name) }}</span>
                                    <span class="patient-number">{{ patient.number }}</span>
                                    <div class="patient-flags">
                                        <span class="checking patient-flag">检查中</span>
                                        <span v-if="patient.isEmergency" class="emergency-patient patient-flag">急诊</span>
                                        <span v-if="patient.isReturnVisit" class="return-visit-patient patient-flag">复诊</span>
                                        <span v-if="patient.appointmentTime" class="appointment-patient patient-flag">预约</span>
                                        <span v-if="patient.isReferral" class="referral-patient patient-flag">转诊</span>
                                        <span v-if="patient.isSkip" class="skip-patient patient-flag">过号</span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="patients-title">
                            <div>等候检查的患者</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="patients">
                                <div class="no-patient" v-if="waitingInfo.waitingPatients.length == 0">
                                    <div>暂无等候的患者</div>
                                </div>
                                <div class="waiting-patient patient" v-for="patient in waitingInfo.waitingPatients" :key="patient.number">
                                    <span class="patient-name">{{ getPatientName(patient.name) }}</span>
                                    <span class="patient-number">{{ patient.number }}</span>
                                    <div class="patient-flags">
                                        <span v-if="patient.isEmergency" class="emergency-patient patient-flag">急诊</span>
                                        <span v-if="patient.isReturnVisit" class="return-visit-patient patient-flag">复诊</span>
                                        <span v-if="patient.appointmentTime" class="appointment-patient patient-flag">预约</span>
                                        <span v-if="patient.isReferral" class="referral-patient patient-flag">转诊</span>
                                        <span v-if="patient.isSkip" class="skip-patient patient-flag">过号</span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="footer">
            <div v-if="callingInfo" class="calling-info">
                <i class="fa fa-bullhorn pe-3 fs-1"></i>
                <span>{{ callingInfo }}</span>
            </div>
            <div v-if="!callingInfo" class="message">{{ message }}</div>
        </div>
    </div>
</body>

</html>

<script>
    new Vue({
        el: '#app',
        data: {
            station: {},
            waitingInfo: {},
            currentTime: new Date().toLocaleTimeString(),
            message: '请按序就诊，勿大声喧哗',
            callingInfo: null,
        },
        methods: {
            getPatientName(patientName) {
                return patientName;
            },
            async loadWaitingInfos() {
                const waitingInfos = await getStationWaitingInfos();
                if (waitingInfos.length > 0) {
                    const waitingInfo = waitingInfos[0];
                    waitingInfo.readyPatients ??= [];
                    waitingInfo.readyPatients = waitingInfo.readyPatients.slice(waitingInfo.readyPatients.length - 2, waitingInfo.readyPatients.length);
                    waitingInfo.waitingPatients ??= [];
                    waitingInfo.waitingPatients = waitingInfo.waitingPatients.slice(0, 3);
                    this.waitingInfo = { ...waitingInfo };
                } else {
                    this.waitingInfo = { readyPatients: [], waitingPatients: [] };
                }
            }
        },
        computed: {
            stationLogo: function () {
                return `data:image/png;base64,${this.station.logo}`;
            }
        },
        mounted() {
            getStation().then(result => {
                this.station = result.data;
            });

            setInterval(() => {
                this.currentTime = new Date().toLocaleTimeString();
            }, 1000);

            this.loadWaitingInfos();

            setInterval(async () => {
                await this.loadWaitingInfos();
            }, 5000);
        }
    })
</script>